﻿<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
    <!--<![endif]-->
    <!-- BEGIN HEAD -->

    <head>
        <meta charset="utf-8" />
        <title>SuperMgr前端框架</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <meta content="" name="description" />
        <meta content="" name="author" />
        <!--全局通用框架样式 begin-->
        <!-- 全局基本样式 -->

        <link href="../content/superui/min/css/superui.common.min.css" rel="stylesheet" />
        <!-- 全局主题样式 -->
        <link href="../content/superui/global/css/components.min.css" id="style_components" rel="stylesheet" />
        <link href="../content/superui/pages/layouts/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
        <!--全局通用框架样式 end-->
        </head>
    <body>
        <div class="page-container">
            <div class="page-content">
                <h3 class="page-title"> Bootstrap Switch组件
                    <small>bootstrap switch组件</small>
                </h3>
                <!-- END PAGE TITLE-->
                <!-- END PAGE HEADER-->
                <div class="note note-success">
                    <h3>Bootstrap Switch组件 </h3>
                    <p> 炫酷的单选和多选按钮开关组件
                        <a href="http://www.bootstrap-switch.org/" target="_blank">官方文档</a>. </p>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <!-- BEGIN PORTLET-->
                        <div class="portlet light form-fit bordered">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="icon-settings font-red"></i>
                                    <span class="caption-subject font-red sbold uppercase">Bootstrap Switch效果</span>
                                </div>
                                <div class="actions">
                                    <input type="checkbox" class="make-switch" checked data-on="success" data-on-color="success" data-off-color="warning" data-size="small"> </div>
                            </div>
                            <div class="portlet-body form">
                                <!-- BEGIN FORM-->
                                <form action="#" class="form-horizontal form-bordered">
                                    <div class="form-body">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">默认尺寸</label>
                                            <div class="col-md-9">
                                                <input type="checkbox" checked class="make-switch" data-size="small">
                                                <input type="checkbox" checked class="make-switch" data-size="normal">
                                                <input type="checkbox" checked class="make-switch" data-size="large"> </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">颜色</label>
                                            <div class="col-md-9">
                                                <input type="checkbox" class="make-switch" checked data-on-color="primary" data-off-color="info">
                                                <input type="checkbox" class="make-switch" checked data-on-color="info" data-off-color="success">
                                                <input type="checkbox" class="make-switch" checked data-on-color="success" data-off-color="warning">
                                                <input type="checkbox" class="make-switch" checked data-on-color="warning" data-off-color="danger">
                                                <input type="checkbox" class="make-switch" checked data-on-color="danger" data-off-color="default">
                                                <input type="checkbox" class="make-switch" checked data-on-color="default" data-off-color="primary"> </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">禁用 / 只读</label>
                                            <div class="col-md-9">
                                                <input type="checkbox" checked disabled class="make-switch" />
                                                <input type="checkbox" checked readonly class="make-switch" /> </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">文本</label>
                                            <div class="col-md-9">
                                                <input type="checkbox" class="make-switch" data-on-text="Yes" data-off-text="No">
                                                <input type="checkbox" class="make-switch" data-on-text="1" data-off-text="0"> </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">长文本</label>
                                            <div class="col-md-9">
                                                <input type="checkbox" class="make-switch" data-on-text="&nbsp;开启&nbsp;" data-off-text="&nbsp;关闭&nbsp;">
                                                <input type="checkbox" class="make-switch" data-on-text="&nbsp;启用&nbsp;&nbsp;" data-off-text="&nbsp;禁用&nbsp;"> </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">标题</label>
                                            <div class="col-md-9">
                                                <input type="checkbox" class="make-switch" checked data-on-text="TV">
                                                <input type="checkbox" class="make-switch" checked data-off-text="Signal"> </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">HTML内容</label>
                                            <div class="col-md-9">
                                                <input type="checkbox" class="make-switch" checked data-on-text="<i class='fa fa-check'></i>" data-off-text="<i class='fa fa-times'></i>">
                                                <input type="checkbox" class="make-switch" checked data-on-text="<i class='fa fa-user'></i>" data-off-text="<i class='fa fa-trash-o'></i>"> </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">带图标的html标题</label>
                                            <div class="col-md-9">
                                                <input type="checkbox" checked class="make-switch switch-large" data-label-icon="fa fa-fullscreen" data-on-text="<i class='fa fa-check'></i>" data-off-text="<i class='fa fa-times'></i>">
                                                <input type="checkbox" checked class="make-switch switch-large" data-label-icon="fa fa-youtube" data-on-text="<i class='fa fa-thumbs-up'></i>" data-off-text="<i class='fa fa-thumbs-down'></i>"> </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3">单选框组</label>
                                            <div class="col-md-9">
                                                <div class="margin-bottom-10">
                                                    <label for="option1">选项 1</label>
                                                    <input id="option1" type="radio" name="radio1" value="option1" class="make-switch switch-radio1"> </div>
                                                <div class="margin-bottom-10">
                                                    <label for="option2">选项 2</label>
                                                    <input id="option2" type="radio" name="radio1" value="option2" class="make-switch switch-radio1"> </div>
                                                <div class="margin-bottom-10">
                                                    <label for="option3">选项 3</label>
                                                    <input id="option3" type="radio" name="radio1" value="option3" class="make-switch switch-radio1"> </div>
                                            </div>
                                        </div>
                                        <div class="form-group last">
                                            <label class="control-label col-md-3">模态窗体</label>
                                            <div class="col-md-9">
                                                <a href="#myModal" role="button" class="btn red btn-outline" data-toggle="modal"> 查看模态窗体效果 </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                        <div class="row">
                                            <div class="col-md-offset-3 col-md-9">
                                                <a href="javascript:;" class="btn green">
                                                    <i class="fa fa-check"></i> 确定</a>
                                                <a href="javascript:;" class="btn btn-outline grey-salsa">取消</a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <div id="myModal" class="modal fade" role="dialog" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <a href="javascript:;" class="close" data-dismiss="modal" aria-hidden="true"></a>
                                                <h4 class="modal-title">Bootstrap switches组件</h4>
                                            </div>
                                            <div class="modal-body">
                                                <form action="#" class="form-horizontal">
                                                    <div class="form-group">
                                                        <label class="control-label col-md-3">默认尺寸</label>
                                                        <div class="col-md-9">
                                                            <input type="checkbox" checked class="make-switch" data-size="small">
                                                            <input type="checkbox" checked class="make-switch" data-size="normal">
                                                            <input type="checkbox" checked class="make-switch" data-size="large"> </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="control-label col-md-3">颜色</label>
                                                        <div class="col-md-9">
                                                            <input type="checkbox" class="make-switch" checked data-on-color="primary" data-off-color="info">
                                                            <input type="checkbox" class="make-switch" checked data-on-color="success" data-off-color="warning">
                                                            <input type="checkbox" class="make-switch" checked data-on-color="warning" data-off-color="danger"> </div>
                                                    </div>
                                                    <div class="form-group last">
                                                        <label class="control-label col-md-3">禁用 / 只读</label>
                                                        <div class="col-md-9">
                                                            <input type="checkbox" checked disabled class="make-switch" />
                                                            <input type="checkbox" checked readonly class="make-switch" /> </div>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <a href="javascript:;" class="btn grey-salsa btn-outline" data-dismiss="modal">关闭</a>
                                                <a href="javascript:;" class="btn green">
                                                    <i class="fa fa-check"></i>保存</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- END FORM-->
                            </div>
                        </div>
                        <!-- END PORTLET-->
                    </div>
                </div>
            </div>
            <!-- END CONTENT BODY -->
        </div>
        <!--[if lt IE 9]>
<script src="../assets/global/plugins/respond.min.js"></script>
<script src="../assets/global/plugins/excanvas.min.js"></script> 
<![endif]-->
        <!--[if lt IE 9]>
    <script src="../content/superui/base/base-core/excanvas.min.js"></script>
    <script src="../content/superui/base/base-core/respond.min.js"></script>
    <![endif]-->
        <!-- 全局公共类库Begin -->
        <script src="../content/superui/min/js/superui.common.min.js"></script>

      <script type="text/javascript">
          $('.switch-radio1').on('switch-change', function () {
              $('.switch-radio1').bootstrapSwitch('toggleRadioState');
          });

          // or
          $('.switch-radio1').on('switch-change', function () {
              $('.switch-radio1').bootstrapSwitch('toggleRadioStateAllowUncheck');
          });

          // or
          $('.switch-radio1').on('switch-change', function () {
              $('.switch-radio1').bootstrapSwitch('toggleRadioStateAllowUncheck', false);
          });
      </script>
    </body>

</html>